/**
 * @fileoverview Tutorial for Coding in Chrome.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mdiehl@workbenchplatform.com (Matt Diehl)
 * @author carheden@google.com (Adam Carheden)
 */
{namespace cwc.soy.ui.Tutorial autoescape="strict"}


/**
 * Main template for multi-step tutorial that appears inside the webview
 */
{template .template}
  {@param description: string}
  {@param online: bool}
  {@param prefix: string}
  {@param steps: list<?>}
  {@param url: string}
  {@param allowEdit: bool}

  <div id="{$prefix}container">
    {if $allowEdit}
      <button type="button" id="{$prefix}edit" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">edit</i>
      </button>
    {/if}
    {if $url}
      <div id="{$prefix}url" class="mdl-typography--caption">
        Full Project: <a href="{$url}" target="_blank" noreferrer noopener>{$url}</a>
      </div>
    {/if}
    <div id="{$prefix}description">
      <p>{$description}</p>
    </div>
    <ol id="{$prefix}steps">
      {foreach $step in $steps}
        {call .step_ data="$step"}
          {param online: $online /}
          {param prefix: $prefix + 'step-' /}
          {param isLastStep: isLast($step) /}
        {/call}
      {/foreach}
    </ol>
    <div id='{$prefix}editor' class='is-hidden'></div>
    <div id="{$prefix}media-overlay" class='is-hidden'>
      <button type="button" id="{$prefix}media-overlay-close" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">arrow_back</i>
      </button>
      <div id="{$prefix}media-overlay-content"></div>
    </div>
  </div>
{/template}


/**
 * Message
 */
{template .message}
  {@param message: string}
  {$message}
{/template}


/**
 * Step
 */
{template .step_ private="true"}
  {@param description: string}
  {@param id: int}
  {@param images: list<string>}
  {@param isLastStep: bool}
  {@param hasCode: bool}
  {@param hasTour: bool}
  {@param number: number}
  {@param online: bool}
  {@param prefix: string}
  {@param title: string}
  {@param videos: list<string>}
  {@param youtube_videos: list<string>}

  <li id="{$prefix}{$id}" class="{$prefix}container {$prefix}step">
    <div class="{$prefix}header">
      <div class="{$prefix}number">
        <span class="{$prefix}number-text">{$number}</span>
        <span class="{$prefix}number-check">
          <i class="material-icons">checkmark</i>
        </span>
      </div>
      <div class="{$prefix}title">{$title}</div>
    </div>
    <div class="{$prefix}content">
      <div class="{$prefix}message"></div>
      <div class="{$prefix}description">{$description}</div>
      <div class="{$prefix}media">
        {foreach $image in $images}
          {call .image_button}
            {param prefix: $prefix /}
            {param src: $image /}
          {/call}
        {/foreach}
        {foreach $video in $videos}
          {call .video_button}
            {param prefix: $prefix /}
            {param src: $video /}
          {/call}
        {/foreach}
        {if $online}
          {foreach $video in $youtube_videos}
            {call .youtube_button}
              {param prefix: $prefix /}
              {param src: $video /}
            {/call}
          {/foreach}
        {/if}
      </div>
        <div class="{$prefix}actions">
          {if $hasCode}
            <button type="button" class="mdl-button mdl-js-button mdl-button--colored mdl-button--raised {$prefix}load-code">
              <i class='material-icons'>chevron_left</i><label>{msg desc="Overwrite the content of the editor with the example code for the current step"}Load Example Code{/msg}</label>
            </button>
          {/if}
          {if $hasTour}
            <button type="button" class="mdl-button mdl-js-button mdl-button--colored mdl-button--raised {$prefix}load-tour">
              <label>{msg desc="Shows the user what to do by opening a set of modal dialogs that point to areas of the scren"}Show Me{/msg}</label>
            </button>
          {/if}
          {if not $isLastStep}
            <button type="button" class="mdl-button mdl-js-button mdl-button--colored mdl-button--raised {$prefix}continue">{msg desc="Continue to the next step"}Continue{/msg}</button>
          {/if}
        </div>
    </div>
  </li>
{/template}

/**
 * Image button
 */
{template .image_button}
  {@param prefix: string}
  {@param src: string}
  {call .media_button_ data="all"}
    {param media_type: 'image' /}
    {param content kind="html"}
      <img />
      <i class="material-icons">fullscreen</i>
    {/param}
  {/call}
{/template}

/**
 * Video button
 */
{template .video_button}
  {@param prefix: string}
  {@param src: string}
  {call .media_button_ data="all"}
    {param media_type: 'video' /}
    {param content kind="html"}
      <div>
        <i class="material-icons">play_circle_outline</i>
      </div>
    {/param}
  {/call}
{/template}

/**
 * YouTube button
 */
{template .youtube_button}
  {@param prefix: string}
  {@param src: string}
  {call .media_button_ data="all"}
    {param media_type: 'youtube' /}
    {param content kind="html"}
      <img src='https://img.youtube.com/vi/{$src}/0.jpg' />
      <i class="material-icons">play_circle_outline</i>
    {/param}
  {/call}
{/template}


/**
 * Generic media button
 */
{template .media_button_ private="true"}
  {@param prefix: string}
  {@param media_type: string}
  {@param src: string}
  {@param content: string}
  <button type="button" class="{$prefix}media-item {$prefix}media-expand {$prefix}media-expand"
    title="Expand {$media_type}" data-media-type="{$media_type}" data-media-src="{$src}">
    {$content}
  </button>
{/template}
